<template>
	<view class="sumitCont">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发放登记</block>
		</cu-custom>
		<view class="list">
			<view class="left">物品名称</view>
			<view class="right">{{detail.goodsName}}</view>
		</view>
		<view class="list">
			<view class="left">物品来源</view>
			<view class="right">{{detail.goodsKindName}}</view>
		</view>
		<view class="list">
			<view class="left">领取时间</view>
			<view class="right">{{recTime}}</view>
		</view>
		<view class="list">
			<view class="left">已发数量</view>
			<view class="right">{{detail.haveSendNum}}</view>
		</view>
		<view class="list">
			<view class="left">待发数量</view>
			<view class="right">{{detail.sendNum}}</view>
		</view>
		<view style="height: 20rpx;background-color: #F0F0F0;">
		</view>
		<view class="cu-form-group">
			<view class="title">领用房间</view>
			<picker @change="PickerChange" :value="index" :range="picker">
				<view class="picker" style="color: #999">
					{{index>-1?picker[index]:'请选择'}}
				</view>
			</picker>
		</view>
		<view class="select cu-form-group"  @click="receiver">
			<view class="left">领用人</view>
			<view class="right">
				<text class="inner">{{content}}</text>
				<text  class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<!-- 选择弹框 -->
	
		<view class="quantity cu-form-group">
			<view class="quantity-left">
				发放数量
			</view>
			<view class="quantity-right">
				<!-- 框 -->
				<view class="quantity-inner">
					<view class="lg border cuIcon-move" @click="reduce"></view>
					<view class="center">
						<input type="number" v-model="param.haveSendNum" @input="input">
					</view>
					<view class="lg border  cuIcon-add" @click="add"></view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/9
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view>
			<view style="height: 140rpx;"></view>
			<view class="submit">
				<button type="default" v-if="!showSubmit">确认发放</button>
				<button type="primary" v-else @click="submit">确认发放</button>
			</view>
		</view>
		<section class="Popup-Page">
				<s-popup custom-class="bottom-popup" position="bottom"  v-model="showBottomVisible">
					<view class="popup-inner">
						<view class="popup-tp">
							<view @click="showBottomVisible=false">取消</view>
							<view @click="confirm">确定</view>
						</view>
						<checkbox-group>
							<view class="group-item" @click="changeRemark(item,index)" v-for="(item,index) in remarkLists" :key="index">
								<view class="group-inner">
									{{item.oldBaseName}}
										<label>
											<checkbox style="transform:scale(0.6)" class='blue' :class="item.isCheck?'checked':''" :checked="item.isCheck?true:false" value="C"></checkbox>
										</label>
								</view>
							</view>
						</checkbox-group>
					</view>
				</s-popup>
		</section>
	</view>
</template>

<script>
	import sPopup from '../../../../components/s-popup/index.vue';
	export default {
		components: {
		  sPopup
		},
		data() {
			return {
				detail:{},//登记详情
				uploadUrl: 'https://backend.sunsetcare-mirrortech.com:388/object/putObjectByStream', //文件上传接口
				bucketName: 'mirrortech-test',//上传
				thetype: '1598249702680', //时间戳
				showBottomVisible:false,//显示
				index: -1,
				picker: [],
				remarkLists:[
					{
						content:'12121211',
						isCheck:false
					}
				],
				imgList:[],
				totalList:[],
				tabIndex:-1,//当前选中
				content:'请选择',//当前选中
				param:{
				  outSendId:'',
				  haveSendNum:1, //需要数量
				  oldManUrlList: [],
				  oldManIds: [
				  ],
				  sendTime:"",
				  sendEmployeeId: 202012170000059
				},
				imgUrl:'',
				item:{},//上页
				showSubmit:false,
				recTime:''//领用时间
			}
		},
		onLoad(options){
			 this.currentTime();   
			this.item = JSON.parse(options.item)
			// 获取房间
			console.log(this.item)
			this.getBedAndOldBase();
			this.getById(this.item.id)
			this.param.outSendId = this.item.id;
			this.param.sendEmployeeId = uni.getStorageSync('employeeId')
		},
		methods: {
			currentTime(){
			      setInterval(this.getTime,500)
			},
			getTime:function(){
			      var _this = this;
			      let yy = new Date().getFullYear();
			      let mm = new Date().getMonth()+1<10 ? '0'+(new Date().getMonth()+1) : new Date().getMonth()+1;
			      let dd = new Date().getDate()<10 ? '0'+new Date().getDate() : new Date().getDate();;
			      let hh = new Date().getHours()<10 ? '0'+new Date().getHours() : new Date().getHours();;
			      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
			      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
			      _this.recTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
			    },
			getData(){
				let data = new Data();
			},
			input(e){
				if(Number(e.detail.value)>this.detail.sendNum){
					this.param.haveSendNum = this.detail.sendNum;
				}
				if(Number(e.detail.value) < 0){
					this.param.haveSendNum = 1;
				}
				if(this.param.haveSendNum==0){
					this.param.haveSendNum = 1;
				}
			},
			reduce(){
				if(this.param.haveSendNum>1){
					this.param.haveSendNum--
				}
			},
			add(){
				if(this.param.haveSendNum >= this.detail.sendNum){
				}else{
					this.param.haveSendNum++
				}
			},
			// 登记详情
			getById(id){
				let param = {
					id
				}
				this.$http("/warehouse-service/outSend/getById", "get", param).then((res) => {
				    if (res.data.code == 200) {
						this.detail = res.data.data;
					
					}
				});
			},
			receiver(){
				if(this.tabIndex<0){
					 uni.showToast({
					    title:"请先选择房间",
						icon:'none',
					})
					return
				}
				this.showBottomVisible=true 
			},
			getBedAndOldBase(){
				this.picker = []
				let param = {}
				 param.teamId = uni.getStorageSync("teamId");
				this.$http("/care-service/oldBaseDetail/getBedAndOldBase", "get", param).then((res) => {
				    if (res.data.code == 200) {
						const  totalList  = res.data.data
						this.totalList = res.data.data
						for(let item of totalList){
							this.picker.push(item.roomName)
						}
					}
				  }
				);
			},
			submit(){
				this.param.sendTime = this.recTime
				this.$http("/warehouse-service/outSendLog/saveLog", "post", this.param).then((res) => {
				    if (res.data.code == 200) {
						uni.navigateBack({
						    delta: 1
						});
					}
				  }
				);
			},
			DelImg(e) {
				uni.showModal({
					title: '',
					content: '确定要删除吗',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.param.oldManUrlList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						// this.imgUrl = res.tempFilePaths;
						// this.imgList = res.tempFilePaths
						// this.param.oldManUrl = res.tempFilePaths[0]
						this.uploadImg(res.tempFilePaths[0])
						console.log(res.tempFilePaths,'9999999999')
					}
				});
			},
			uploadImg(data) {
				let sarr = data.split('/');
				const strs = sarr[sarr.length-1];
				const that = this;
				uni.uploadFile({
					url: that.uploadUrl + '?bucketName=' + that.bucketName + '&objectName=' + strs + '&theType=' + that.thetype +
						'&fileType=4' + '&url=' + data,
					filePath: data,
					name: 'file',
					formData: {
						file: data
					},
					success: function(res) {
						let data = JSON.parse(res.data);
						if(data.code == 200){
							that.param.oldManUrlList =that.param.oldManUrlList.concat(data.data.data); //獲取線上地址
							console.log(that.param.oldManUrlList,'that.param.oldManUrlthat.param.oldManUrlthat.param.oldManUrl')
						}
					},
					fail: function(res) {
						console.log(res,'失败')
					},
					complete: function(res) {
						console.log(res,'完成')
					}
				})
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			PickerChange(e) {
				// totalList
				console.log(999999)
				this.param.oldManIds = [];
				this.index = e.detail.value
				this.tabIndex  = e.detail.value
				this.remarkLists = []
				for(let item of this.totalList[this.tabIndex].oldList){
					this.remarkLists.push({
						oldBaseName:item.oldBaseName,
						isCheck:false,
						oldBaseId:item.oldBaseId,
					});
				}
			},
			confirm(){
				this.showBottomVisible = false;
				this.content = '';
				for(let item of this.remarkLists){
					if(item.isCheck){
						this.content+=item.oldBaseName+','
					}
				}
				this.content = this.content.substr(0,this.content.length-1);
				this.showSubmit = false
				for(let item of this.remarkLists){
					if(item.isCheck){
						this.param.oldManIds.push(item.oldBaseId)
						this.showSubmit  = true;
					}
				}
				console.log(this.param,9999)
			},
			changeRemark(item,index){
				// remarkLists
				this.remarkLists[index].isCheck=!this.remarkLists[index].isCheck;
				// item.isCheck=!item.isCheck oldBaseId
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './submit.scss';
</style>
